<template>
  <div @touchend.stop.prevent="toggle" class="switch" :class="classes">
    <div class="switch-block"></div>
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        type: Boolean
      },

      // 类前缀
      classPrefix: {
        type: String,
        default: 'x-switch'
      },

      disabled: {
        type: Boolean,
        default: false
      },

      expand: null
    },

    computed: {
      // 类
      classes () {
        var result = [this.classPrefix]

        if (this.value) {
          result.push(`${this.classPrefix}-on`)
        }

        if (this.disabled) {
          result.push('disabled')
        }

        return result.join(' ')
      }
    },

    methods: {
      toggle () {
        if (this.disabled) {
          return
        }
        this.$dispatch('toggle', this.expand)
      }
    }
  }
</script>

<style lang="stylus">

  .x-switch
    position relative
    display inline-block
    vertical-align middle
    background #CCC
    width 1.2rem
    height 0.7rem
    line-height 0.7rem
    cursor pointer
    user-select none
    border-radius 1rem

    .switch-block
      absolute left 1px top 1px
      width 0.66rem
      height 0.66rem
      background #FFF
      border-radius 0.5rem
      transition left .2s ease-in-out
      box-shadow 0 0 2px rgba(0, 0, 0, .2)

    &.disabled
      cursor not-allowed

  .x-switch-on
    background #09b85a
    text-align left

    .switch-block
      left 0.51rem
</style>
